<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tab,nav</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <script src="../zepto.min.js"></script>
  <script src="../iscroll.js"></script>
</head>

<body ontouchstart>


<div class="weui_tab " style="height:44px;"><!--tab-fixed添加顶部-->
  <div class="weui_navbar" style="height:44px;">
    <div class="weui_navbar_item  tab-green">
      已发货
    </div>
    <div class="weui_navbar_item">
      未发货
    </div>
    <div class="weui_navbar_item">
      全部订单
    </div>
  </div>
</div>
<p class="divider">我是分割线 </p>
<div class="weui_tab weui_tab_red" style="height:44px;">
  <div class="weui_navbar" style="height:44px;">
    <div class="weui_navbar_item  ">
      已发货
    </div>
    <div class="weui_navbar_item">
      未发货
    </div>
    <div class="weui_navbar_item tab-red">
      全部订单
    </div>
  </div>
</div>
<div class="weui_tab weui_tab_blue" style="height:44px;">
  <div class="weui_navbar" style="height:44px;">
    <div class="weui_navbar_item tab-blue">
      选项一
    </div>
    <div class="weui_navbar_item">
      选项二
    </div>
    <div class="weui_navbar_item">
      选项三
    </div>
    <div class="weui_navbar_item">
      选项四
    </div>
    <div class="weui_navbar_item">
      选项五
    </div>
  </div>
</div>

<p class="divider">我是分割线 </p>
<div class="weui_tab" style="height:44px;">
  <div class="weui_navbar" style="height:44px;">
    <div class="weui_navbar_item tab-blue">
      选项一
    </div>
    <div class="weui_navbar_item">
      选项二
    </div>
    <div class="weui_navbar_item">
      选项三
    </div>
  </div>
  <div class="weui_tab_bd">
    11
  </div>
</div>
<br>


<div id="tagnav" class="weui-navigator weui-navigator-wrapper">
  <ul class="weui-navigator-list">
    <li><a href="javascript:;">首页</a></li>
    <li><a href="javascript:;">我爱中国</a></li>
    <li><a href="javascript:;">国内</a></li>
    <li><a href="javascript:;">国际</a></li>
    <li><a href="javascript:;">军事</a></li>
    <li><a href="javascript:;">社会</a></li>
    <li><a href="javascript:;">娱乐</a></li>
    <li><a href="javascript:;">女人</a></li>
    <li><a href="javascript:;">体育</a></li>
    <li><a href="javascript:;">科技</a></li>
    <li><a href="javascript:;">互联网</a></li>
    <li><a href="javascript:;">教育</a></li>
    <li><a href="javascript:;">财经</a></li>
    <li><a href="javascript:;">房产</a></li>
    <li><a href="javascript:;">汽车</a></li>
  </ul>
</div>
<script type="text/javascript">
  $(function () {
    TagNav('#tagnav', {
      type: 'scrollToFirst',
    });
  })


</script>
<!------------------------------------------------>
<div class="weui_tab tab-bottom" style="height:55px;">

  <div class="weui_tabbar ">
    <a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
      <div class="weui_tabbar_icon">
        <img src="../images/icon_nav_button.png" alt="">
      </div>
      <p class="weui_tabbar_label">微信</p>
    </a>
    <a href="javascript:;" class="weui_tabbar_item">
      <div class="weui_tabbar_icon">
        <img src="../images/icon_nav_msg.png" alt="">
      </div>
      <p class="weui_tabbar_label">通讯录</p>
    </a>
    <a href="javascript:;" class="weui_tabbar_item">
      <div class="weui_tabbar_icon">
        <img src="../images/icon_nav_article.png" alt="">
      </div>
      <p class="weui_tabbar_label">发现</p>
    </a>
    <a href="javascript:;" class="weui_tabbar_item">
      <div class="weui_tabbar_icon">
        <img src="../images/icon_nav_cell.png" alt="">
      </div>
      <p class="weui_tabbar_label">我</p>
    </a>
    <a href="javascript:;" class="weui_tabbar_item">
      <div class="weui_tabbar_icon">
        <img src="../images/icon_nav_cell.png" alt="">
      </div>
      <p class="weui_tabbar_label">设置</p>
    </a>
  </div>
</div>


<script src="../example.js"></script>
</body>
</html>
